Next.js statik eksportlari: Faqat mijoz tomonida ishlaydigan ilovalar yaratish

Next.js - bu dasturchilarga yuqori unumdorlikka ega, kengaytiriladigan va SEO-ga mos veb-ilovalar yaratish imkonini beruvchi kuchli React freymvorkidir. Next.js server tomonida renderlash (SSR) va statik sayt generatsiyasi (SSG) imkoniyatlari bilan mashhur bo'lsa-da, u statik eksportlar yordamida faqat mijoz tomonida ishlaydigan ilovalar yaratish uchun moslashuvchanlikni ham taklif etadi. Ushbu yondashuv sizga Next.js-ning asboblari va tuzilmasidan foydalangan holda to'liq mijoz tomonida ishlaydigan ilovani joylashtirish imkonini beradi. Ushbu maqola sizga Next.js statik eksportlari yordamida faqat mijoz tomonida ishlaydigan ilovalar yaratish haqida bilishingiz kerak bo'lgan barcha narsalarni, jumladan afzalliklari, cheklovlari, sozlash jarayoni va ilg'or usullarini o'rgatadi.

Next.js statik eksportlari nima?

Next.js-dagi statik eksportlar - bu qurish (build) jarayonida ilovangizning to'liq statik versiyasini yaratish jarayonidir. Bu shuni anglatadiki, barcha HTML, CSS va JavaScript fayllari oldindan renderlanadi va to'g'ridan-to'g'ri statik fayl serveridan (masalan, Netlify, Vercel, AWS S3 yoki an'anaviy veb-server) xizmat ko'rsatishga tayyor bo'ladi. Serverda renderlanadigan ilovalardan farqli o'laroq, kiruvchi so'rovlarni qayta ishlash uchun Node.js serveri talab qilinmaydi. Buning o'rniga, butun ilova statik aktivlar to'plami sifatida yetkazib beriladi.

Faqat mijoz tomonida ishlaydigan ilovani maqsad qilganda, Next.js ushbu statik aktivlarni barcha dinamik xatti-harakatlar mijoz tomonidagi JavaScript tomonidan boshqariladi degan taxmin bilan yaratadi. Bu, asosan, mijoz tomonida marshrutlash, API so'rovlari va foydalanuvchi o'zaro ta'sirlariga tayanadigan Yagona Sahifali Ilovalar (SPA) uchun ayniqsa foydalidir.

Nima uchun mijoz tomonidagi ilovalar uchun statik eksportlarni tanlash kerak?

Next.js statik eksportlari yordamida mijoz tomonidagi ilovalarni yaratish bir nechta jozibador afzalliklarni taklif etadi:

• Yaxshilangan unumdorlik: Statik aktivlar to'g'ridan-to'g'ri CDN (Content Delivery Network) dan taqdim etilishi mumkin, bu esa tezroq yuklanish vaqtlarini va yaxshilangan foydalanuvchi tajribasini ta'minlaydi. Server tomonida qayta ishlash talab qilinmaydi, bu esa kechikishni kamaytiradi va kengaytiriluvchanlikni oshiradi.
• Kengaytirilgan xavfsizlik: Server tomonidagi komponent bo'lmagani uchun ilovangizning hujum maydoni sezilarli darajada kamayadi. Foydalanish mumkin bo'lgan potentsial zaifliklar kamroq bo'ladi, bu esa ilovangizni xavfsizroq qiladi.
• Soddalashtirilgan joylashtirish: Statik saytni joylashtirish odatda serverda renderlanadigan ilovani joylashtirishdan ancha sodda. Siz keng doiradagi statik xosting provayderlaridan foydalanishingiz mumkin, ularning ko'pchiligi bepul tariflar yoki arzon narxlarni taklif qiladi.
• Tejamkor xosting: Statik xosting odatda serverga asoslangan xostingdan arzonroq, chunki siz faqat saqlash va o'tkazuvchanlik uchun to'laysiz.
• Yaxshiroq SEO (ba'zi shartlar bilan): An'anaviy ravishda mijoz tomonidagi ilovalar SEO muammolariga duch kelsa-da, Next.js statik eksportlari dastlabki HTML tuzilmasini oldindan renderlash orqali bu muammoni yumshatadi. Biroq, mijoz tomonida renderlashga qattiq tayanadigan dinamik tarkib hali ham qo'shimcha SEO strategiyalarini talab qilishi mumkin (masalan, botlar uchun oldindan renderlash xizmatidan foydalanish).
• Dasturlash tajribasi: Next.js issiq modulni almashtirish, tez yangilash va o'rnatilgan marshrutlash kabi xususiyatlar bilan yuqori darajadagi dasturlash tajribasini taqdim etadi, bu esa murakkab mijoz tomonidagi ilovalarni yaratish va qo'llab-quvvatlashni osonlashtiradi.

Statik eksportlarning cheklovlari

Statik eksportlar ko'plab afzalliklarni taklif qilsa-da, ularning cheklovlaridan xabardor bo'lish muhim:

• Server tomonida renderlashning yo'qligi: Statik eksportlar SEO yoki unumdorlik sababli server tomonida renderlashni talab qiladigan ilovalar uchun mos emas. Barcha renderlash mijoz tomonida sodir bo'ladi.
• Cheklangan dinamik tarkib: Server tomonida ma'lumotlarni olish yoki dinamik tarkib yaratishga qattiq tayanadigan ilovalar statik eksportlar uchun yaxshi nomzod bo'lmasligi mumkin. Barcha ma'lumotlarni olish va qayta ishlash mijoz tomonida amalga oshirilishi kerak.
• Dinamik tarkib uchun SEO mulohazalari: Yuqorida aytib o'tilganidek, agar ilovangiz tarkibi asosan mijoz tomonida yaratilsa, SEO muammo bo'lishi mumkin. Qidiruv tizimi kraulerlari JavaScript-ni bajara olmasligi va tarkibni to'g'ri indekslay olmasligi mumkin.
• Qurish (build) vaqti: Statik saytni yaratish, ayniqsa katta va murakkab loyihalar uchun, serverda renderlanadigan ilovani qurishdan ko'ra ko'proq vaqt talab qilishi mumkin.

Next.js-ni statik eksportlar uchun sozlash

Next.js-ni statik eksportlar uchun sozlash bo'yicha bosqichma-bosqich qo'llanma:

1. Yangi Next.js loyihasini yaratish

Agar sizda hali Next.js loyihasi bo'lmasa, quyidagi buyruq yordamida yangisini yarating:

            npx create-next-app my-client-app
            

              
                Copy
              
            
          

Sozlash jarayonida ehtiyojlaringizga eng mos keladigan variantlarni tanlang (masalan, TypeScript, ESLint).

2. `next.config.js` faylini sozlash

Loyihangizning ildiz papkasidagi `next.config.js` faylini oching va quyidagi konfiguratsiyani qo'shing:

            /** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  // Ixtiyoriy: Havolalarni `/me` -> `/me/` ga o'zgartirish va `/me.html` -> `/me/index.html` ni yaratish
  // qarang https://nextjs.org/docs/app/api-reference/next-config#trailing-slash
  // experimental:
  //  {appDir: false}
}

module.exports = nextConfig
            

              
                Copy
              
            
          

`output: 'export'` opsiyasi Next.js-ga ilovangizning statik eksportini yaratishni bildiradi. `trailingSlash: true` ni o'rnatish odatda URL tuzilmasining izchilligini ta'minlash va potentsial SEO muammolarini oldini olish uchun tavsiya etiladi.

3. `package.json` faylini yangilash

Statik eksportlar uchun qurish skriptini qo'shish uchun `package.json` faylingizdagi `scripts` bo'limini o'zgartiring:

            {
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "lint": "next lint"
  }
}
            

              
                Copy
              
            
          

Ushbu skript avval Next.js ilovangizni quradi va keyin uni statik katalogga eksport qiladi.

4. Mijoz tomonida marshrutlashni joriy etish

Siz mijoz tomonida ishlaydigan ilova yaratayotganingiz uchun, `next/router` moduli yoki `react-router-dom` kabi uchinchi tomon kutubxonasi yordamida mijoz tomonida marshrutlashni joriy etishingiz kerak bo'ladi. Mana `next/router` yordamida bir misol:

            import { useRouter } from 'next/router';
import Link from 'next/link';

function HomePage() {
  const router = useRouter();

  const handleClick = () => {
    router.push('/about');
  };

  return (
    <div>
      <h1>Bosh sahifa</h1>
      <p>Bosh sahifaga xush kelibsiz!</p>
      <button onClick={handleClick}>Haqida sahifasiga o'tish</button>

      <Link href="/about">
         <a>Haqida sahifasiga o'tish (Link orqali)</a>
      </Link>
    </div>
  );
}

export default HomePage;
            

              
                Copy
              
            
          

Mijoz tomonida silliq o'tishlarni ta'minlash uchun ichki navigatsiya uchun `next/link` dan `Link` komponentidan foydalanishni unutmang.

5. Ma'lumotlarni mijoz tomonida olish

Mijoz tomonidagi ilovada barcha ma'lumotlarni olish `useEffect` yoki `useState` kabi hooklardan foydalangan holda mijoz tomonida amalga oshirilishi kerak. Masalan:

            import { useState, useEffect } from 'react';

function DataPage() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error(`HTTP xatosi! status: ${response.status}`);
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) return <p>Yuklanmoqda...</p>;
  if (error) return <p>Xatolik: {error.message}</p>;
  if (!data) return <p>Ko'rsatish uchun ma'lumot yo'q</p>;

  return (
    <div>
      <h1>Ma'lumotlar sahifasi</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataPage;
            

              
                Copy
              
            
          

6. Ilovangizni qurish va eksport qilish

Statik eksportni yaratish uchun qurish skriptini ishga tushiring:

            npm run build
            

              
                Copy
              
            
          

Bu sizning ilovangiz uchun statik HTML, CSS va JavaScript fayllarini o'z ichiga olgan `out` (yoki Next.js versiyasiga qarab `public`) katalogini yaratadi.

7. Statik saytingizni joylashtirish

Endi siz `out` katalogining tarkibini Netlify, Vercel, AWS S3 yoki GitHub Pages kabi statik xosting provayderiga joylashtirishingiz mumkin. Ko'pgina provayderlar jarayonni avtomatlashtirish uchun oddiy sudrab-tashlash (drag-and-drop) yoki buyruqlar qatori vositalarini taklif qilishadi.

Mijoz tomonidagi Next.js ilovalari uchun ilg'or usullar

Mijoz tomonidagi Next.js ilovalaringizni optimallashtirish uchun ba'zi ilg'or usullar:

1. Kodni bo'lish va kechiktirilgan yuklash (Lazy Loading)

Kodingizni talab bo'yicha yuklanadigan kichikroq qismlarga bo'lish uchun dinamik importlardan (`import()`) foydalaning. Bu, ayniqsa, katta ilovalar uchun dastlabki yuklash vaqtini sezilarli darajada yaxshilashi mumkin.

            import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function MyPage() {
  return (
    <Suspense fallback={<div>Yuklanmoqda...</div>}>
      <MyComponent />
    </Suspense>
  );
}
            

              
                Copy
              
            
          

2. Tasvirlarni optimallashtirish

`next/image` komponentidan tasvirlarni optimallashtirish uchun foydalaning. Ushbu komponent turli qurilmalar va ekran o'lchamlari uchun tasvirlarni avtomatik ravishda optimallashtiradi, bu esa unumdorlik va foydalanuvchi tajribasini yaxshilaydi. U kechiktirilgan yuklash, moslashuvchan tasvirlar va turli xil tasvir formatlarini qo'llab-quvvatlaydi.

            import Image from 'next/image';

function MyComponent() {
  return (
    <Image
      src="/images/my-image.jpg"
      alt="Mening rasmim"
      width={500}
      height={300}
    />
  );
}
            

              
                Copy
              
            
          

3. Servis ishchilari (Service Workers)

Oflayn funksionallikni yoqish va unumdorlikni oshirish uchun servis ishchisini joriy eting. Servis ishchisi fonda ishlaydigan va tarmoq so'rovlarini ushlab turadigan, aktivlarni keshlashi va bildirishnomalarni yuborishi mumkin bo'lgan skriptdir. `next-pwa` kabi kutubxonalar Next.js ilovangizga servis ishchisini qo'shish jarayonini soddalashtirishi mumkin.

4. Muhit o'zgaruvchilari

Ilovangizni turli muhitlar (masalan, ishlab chiqish, sinov, ishga tushirish) uchun sozlash uchun muhit o'zgaruvchilaridan foydalaning. Next.js `.env` fayli va `process.env` ob'ekti orqali muhit o'zgaruvchilari uchun o'rnatilgan yordamni taqdim etadi. Maxfiy ma'lumotlarni mijoz tomonidagi kodda oshkor qilmaslikdan ehtiyot bo'ling. Muhit o'zgaruvchilarini asosan oshkor qilish xavfsiz bo'lgan konfiguratsiya sozlamalari uchun ishlating.

5. Monitoring va tahlil

Unumdorlik ko'rsatkichlarini kuzatish, xatolarni aniqlash va foydalanuvchi xatti-harakatlari haqida tushunchaga ega bo'lish uchun monitoring va tahlil xizmatini (masalan, Google Analytics, Sentry yoki New Relic) integratsiya qiling. Bu sizga ilovangizni optimallashtirish va vaqt o'tishi bilan foydalanuvchi tajribasini yaxshilashga yordam beradi.

6. Mijoz tomonidagi ilovalarda SEO uchun optimallashtirish

Statik eksportlar dastlabki HTML tuzilmasini ta'minlasa-da, mijoz tomonida ko'p ishlaydigan ilovalarda yaxshiroq SEO uchun ushbu strategiyalarni ko'rib chiqing:

• Oldindan renderlash xizmatlari: Qidiruv tizimi botlariga to'liq renderlangan HTMLni taqdim etish uchun prerender.io kabi xizmatlardan foydalaning.
• Dinamik sayt xaritalari: Ilovangiz tarkibiga qarab sayt xaritangizning XML faylini dinamik ravishda yarating va yangilang.
• Tuzilmali ma'lumotlar: Qidiruv tizimlariga tarkibingizni tushunishga yordam berish uchun tuzilmali ma'lumotlar belgilashini (Schema.org) joriy eting.
• Meta teglar: Joriy marshrut va tarkibga qarab `react-helmet` kabi kutubxonalar yordamida meta teglarni (sarlavha, tavsif va boshqalar) dinamik ravishda yangilang.
• Tarkibni yetkazib berish: Tarkibingiz tez va global miqyosda yuklanishini ta'minlang. CDN-dan foydalaning. Avstraliyadagi foydalanuvchi AQShdagi foydalanuvchi kabi tezkor tajribaga ega bo'lishi kerak.

Xalqarolashtirish (i18n) mulohazalari

Global auditoriya uchun mijoz tomonidagi ilovani yaratishda xalqarolashtirish (i18n) juda muhim. Mana bir nechta eng yaxshi amaliyotlar:

• Tarjima fayllari: Tarjimalaringizni har bir til uchun alohida fayllarda saqlang. Tarjimalarni boshqarish uchun `i18next` yoki `react-intl` kabi kutubxonadan foydalaning.
• Lokalni aniqlash: Foydalanuvchining brauzer sozlamalari yoki IP manziliga asoslangan holda lokalni aniqlashni joriy eting.
• Marshrutlash: Joriy tilni ko'rsatish uchun URL prefikslari yoki subdomenlardan foydalaning (masalan, `/uz/`, `/en/`, `uz.example.com`, `en.example.com`). Next.js 10-versiyasidan boshlab o'rnatilgan i18n marshrutlashni qo'llab-quvvatlaydi.
• Raqam va sana formatlash: Ma'lumotlar turli madaniyatlar uchun to'g'ri ko'rsatilishini ta'minlash uchun lokalga xos raqam va sana formatlashdan foydalaning.
• O'ngdan chapga (RTL) qo'llab-quvvatlash: CSS mantiqiy xususiyatlari va yo'nalish atributlaridan foydalanib, arab va ibroniy kabi o'ngdan chapga yoziladigan tillarni qo'llab-quvvatlang.
• Valyuta formatlash: Valyutalarni turli lokallar uchun to'g'ri belgilar va formatlarda ko'rsating. `Intl.NumberFormat` kabi kutubxonalar juda foydali bo'lishi mumkin.

To'g'ri yondashuvni tanlash: Statik eksport va server tomonida renderlash

Statik eksport yoki server tomonida renderlashdan foydalanish to'g'risida qaror qabul qilish ilovangizning o'ziga xos talablariga bog'liq. Quyidagi omillarni ko'rib chiqing:

• Tarkib turi: Sizning tarkibingiz asosan statikmi yoki dinamikmi? Agar u asosan statik bo'lsa, statik eksportlar yaxshi tanlovdir. Agar u juda dinamik bo'lsa va server tomonida ma'lumotlarni olishni talab qilsa, server tomonida renderlash yanada mos kelishi mumkin.
• SEO talablari: Ilovangiz uchun SEO qanchalik muhim? Agar SEO hal qiluvchi ahamiyatga ega bo'lsa, qidiruv tizimi kraulerlari tarkibingizni to'g'ri indekslay olishini ta'minlash uchun server tomonida renderlash zarur bo'lishi mumkin.
• Unumdorlik talablari: Ilovangiz uchun unumdorlik talablari qanday? Statik eksportlar statik tarkib uchun a'lo darajadagi unumdorlikni ta'minlashi mumkin, server tomonida renderlash esa mijoz tomonidagi qayta ishlashni kamaytirish orqali dinamik tarkib uchun unumdorlikni yaxshilashi mumkin.
• Murakkablik: Ilovangiz qanchalik murakkab? Statik eksportlarni sozlash va joylashtirish odatda soddaroq, server tomonida renderlash esa dasturlash jarayoningizga murakkablik qo'shishi mumkin.
• Byudjet: Xosting va infratuzilma uchun byudjetingiz qanday? Statik xosting odatda serverga asoslangan xostingdan arzonroq.

Haqiqiy hayotdan misollar

Next.js statik eksportlaridan foyda ko'rishi mumkin bo'lgan ba'zi haqiqiy hayotdan misollar:

• Kirish sahifalari (Landing Pages): Statik tarkib va minimal interaktivlikka ega oddiy kirish sahifalari.
• Hujjatlar saytlari: Oldindan renderlangan tarkib va mijoz tomonida qidiruv funksiyasiga ega hujjatlar saytlari.
• Bloglar (CMS bilan): Tarkib boshsiz CMS orqali boshqariladigan va mijoz tomonida olinadigan bloglar.
• Portfoliolar: Statik ma'lumotlar va mijoz tomonida marshrutlashga ega shaxsiy yoki professional portfoliolar.
• Elektron tijorat mahsulot kataloglari: Mahsulot tafsilotlarini oldindan renderlay oladigan kichik va o'rta hajmdagi elektron tijorat do'konlari, bu yerda dinamik savat va to'lov jarayonlari mijoz tomonida amalga oshiriladi.

Misol: Xalqaro kompaniya veb-sayti

Nyu-York, London va Tokioda ofislari bo'lgan kompaniyani tasavvur qiling. Ular ingliz, fransuz va yapon tillarida mavjud veb-saytni xohlashadi. Next.js statik eksporti, boshsiz CMS va i18n kutubxonalari bilan birgalikda ideal bo'lishi mumkin. CMS tarjima qilingan tarkibni saqlaydi, Next.js uni mijoz tomonida olib renderlaydi va statik sayt tez kirish uchun global miqyosda CDN-da joylashtirilishi mumkin.

Xulosa

Next.js statik eksportlari Next.js freymvorkining afzalliklaridan foydalangan holda faqat mijoz tomonida ishlaydigan ilovalar yaratishning kuchli usulini taqdim etadi. Afzalliklar, cheklovlar, sozlash jarayoni va ilg'or usullarni tushunib, siz o'zingizning maxsus talablaringizga javob beradigan tez, xavfsiz va global miqyosda mavjud veb-tajribalarni yaratishingiz mumkin. Oddiy kirish sahifasi yoki murakkab SPA yaratayotgan bo'lsangiz ham, statik eksportlar veb-dasturlash arsenalingizda qimmatli vosita bo'lishi mumkin.